html,body,.page{
    margin: 0;
    height: 100%;
}
.page{
    display: flex;
    flex-direction: column;
    margin: auto;
}
header{
    z-index: 1;
    width: 100%;
    flex-shrink: 0;
}
.title-container{
    width: 100%;
    height: 60px;
    display: flex;
    justify-content: center;
    align-items: center;
}
#return{
    flex:0 0 20px;
    width: 20px;
    height: 20px;
    margin-left: 15px;
    background: url(imgs/back.svg) no-repeat;
    background-size: 20px 20px;
    border: none;
}
.title{
    flex:1 1 auto;
    text-align: center;
    font-weight: 600;
}
#share{
    flex:0 0 20px;
    width: 20px;
    height: 20px;
    margin-right: 15px;
    background: url(imgs/share.svg) no-repeat;
    background-size: 20px 20px;
    border: none;
}
.search-container{
    height: 40px;
    width: 95%;
    margin: auto;
}
form{
    position: relative;
    width: 100%;
}
.search-btn{
    position: absolute;
    width: 20px;
    height: 20px;
    left: 20px;
    top:11px;
    background: url(imgs/search.svg) no-repeat;
    background-size: 20px 20px;
    border: none;
}
.search-text{
    padding-left: 50px;
    width: 100%;
    box-sizing: border-box;
    height: 40px;
    border-radius: 18px;
    background-color: rgba(247, 247, 244, 0.699);
    border: none;
    position: absolute;
    outline: none;
    font-size: 16px;
}
.search-text::-webkit-input-placeholder{
    color: rgba(163, 163, 162, 0.699);
}
.menu{
    width: 90%;
    margin: auto;
    border: 1px solid rgb(172, 173, 173,0.5);
    border-width: 0 0 1px 0;
}
.menu>ul{
    width: 100%;
    padding: 0;
    list-style: none;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap:nowrap;
    margin-top: 10px;
    margin-bottom: 10px;
}
.menu>ul>li{
    flex: 1 ;
    width: 120px;
    min-width: 60px;
    font-size: 15px;
    color: rgba(105, 105, 105, 0.7);
}
.menu>ul:first-of-type>li:first-of-type{
    color: rgb(79, 158, 231);
    font-weight: 600;
}

section{
    flex: 1;
    width: 100%;
    box-sizing: border-box;
    margin: auto;
    overflow: auto;
    padding: 15px;
}
ol{
    margin: 0;
    padding: 0;
    list-style-type:none;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
ol li{
    padding: 10px;
    width: 95%;
    box-sizing: border-box;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
}
.container{
    width: 100%;
    flex: 1;
    display: flex;
}
h1{
    margin: 0 10px 0;
    flex: 0;
    width: 20px;
    font-size:1rem;
}
.corner{
    right: 0;
    top: 5px;
    position: absolute;
    background-color: rgb(238, 239, 240);
    border-radius: 15px;
    padding: 2px 5px;
    display: flex;
    justify-content: center;
    align-items: center;
}
.corner>i{
    padding: 0;
    margin: 0;
    width: 12px;
    height: 12px;
    display: inline-block;
    background: url(imgs/people.svg) no-repeat;
    background-size: 12px 12px;
}
.corner>span{
    color: rgb(175, 174, 174);
    font-size: 6px;
    text-align: center;
}
.container>img{
    flex: 1;
    overflow: hidden;
}
.content{
    padding-right: 50px;
    flex: 3;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    flex-direction: column;
    flex-wrap: wrap;
}
.content>div{
    flex: 1;
    display: flex;
    justify-content: center;
    flex-direction: column;
}
.name{
    margin:0 15px 20px;
    font-weight: 700;
    font-size: 0.8rem;
}
.author{
    padding-left: 15px;
    font-size: 0.6rem;
    color: rgb(101, 101, 102);
}
.re-value{
    padding:10px 15px 0;
    font-size: 0.6rem;
    color: rgb(172, 173, 173);
    font-weight: 700;
    display: flex;
    justify-content:start;
    align-items: center;
}
.re-value span{
    padding-left: 5px;
    padding-right: 5px;
}
.author,.name,.re-value .row{
    display: -webkit-inline-box;/*将对象作为弹性伸缩盒子模型展示*/
    -webkit-box-orient: vertical;/*方向*/
    -webkit-line-clamp: 1;/*超过两行多余的用省略号表示*/
    overflow: hidden;
}
.re-value .img1{
    width: 70px;
    height: 30px;
}
.re-value .img2{
    width: 50px;
    height: 20px;
    padding: 5px 0;
}
